<template>
  <div class="box">
    <div class="department-role-manage">
      <el-tree
        :data="data"
        node-key="id"
        ref="treeBox"
        default-expand-all
        :expand-on-click-node="false"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button
              type="text"
              size="mini"
              @click="() => appendSubordinate(data)"
              >新增下级</el-button
            >
            <el-button
              v-if="node.id > 1"
              type="text"
              size="mini"
              @click="() => appendPeer(data)"
              >新增同级</el-button
            >
            <el-button type="text" size="mini" @click="() => move(data, 1)"
              >上移</el-button
            >
            <el-button type="text" size="mini" @click="() => move(data, -1)"
              >下移</el-button
            >
            <i
              class="el-icon-edit margin-right20 margin-left10"
              @click.stop="() => edit(node, data)"
            ></i>
            <i
              class="el-icon-delete"
              @click.stop="() => remove(node, data)"
            ></i>
          </span>
        </span>
      </el-tree>
      <el-dialog
        :title="title"
        :close-on-click-modal="false"
        :visible.sync="visible"
        width="500px"
      >
        <el-form
          :model="form"
          :rules="formRules"
          ref="form"
          label-width="100px"
        >
          <el-form-item label="岗位名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入岗位名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false" size="small">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit" size="small"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  operationschoolpositiongetTree,
  operationschoolpositionadd,
  operationschoolpositionupdate,
  operationschoolpositiondelete,
  operationschoolpositionup,
  operationschoolpositiondown
} from '@/api/user'
export default {
  name: 'job-administration',
  data () {
    return {
      data: [],
      visible: false,
      title: '',
      form: {
        name: ''
      },
      jobId: '',
      formRules: {
        name: [
          { required: true, message: '岗位名称不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur'
          }
        ]
      },
      inputValue: ''
    }
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 上移下移
    async move (data, index) {
      let api =
        index < 0 ? operationschoolpositiondown : operationschoolpositionup
      let res = await api({
        node_id: data.id
      })
      if (res[0]) {
        return
      }
      if (res[1] && res[1].code === 0) {
        this.getDataList()
      } else {
        this.$message.error(res[1].msg)
      }
    },
    async getDataList () {
      let res = await operationschoolpositiongetTree({
        node_id: 1
      })
      if (res[0]) {
      }
      let data = res[1]
      if (data && data.code === 0) {
        let array = [data.data.node]
        let response = []
        this.queryList(array, response)
        this.data = this.$deepcopy(response)
      } else {
        this.$message.error(data.msg)
      }
    },
    queryList (tdata, list) {
      if (tdata.length) {
        tdata.forEach((ele, index) => {
          list[index] = {
            label: ele.nodeName,
            id: ele.nodeId,
            isEdit: false,
            parent: ele.parent
          }
          let arr = []
          if (ele.children) {
            this.queryList(ele.children, arr)
          }

          if (arr.length) {
            list[index].children = arr
          }
        })
      }
    },
    // 新增同级
    async appendPeer (data) {
      console.log(data)
      this.jobId = data.parent || 1
      this.title = '新增同级'
      this.form.name = ''
      this.init()
    },
    init () {
      this.visible = true
      this.$nextTick(() => {
        // this.$refs.form.resetFields()
        this.$refs.form.clearValidate()
      })
    },
    // 增加下级
    async appendSubordinate (data) {
      this.jobId = data.id
      this.title = '新增下级'
      this.form.name = ''
      this.init()
    },
    remove (node, data) {
      this.$confirm('确定删除操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.removeJob(data)
        })
        .catch(() => {})
    },
    async removeJob (data) {
      let res = await operationschoolpositiondelete({
        node_id: data.id
      })
      if (res[0]) {
        return
      }
      if (res[1] && res[1].code === 0) {
        this.getDataList()
      } else {
        this.$message.error(res[1].msg)
      }
    },
    // 编辑
    edit (node, data) {
      this.jobId = data.id
      this.title = '编辑岗位名称'
      console.log(111, node, data)
      this.form.name = data.label
      this.init()
    },
    del (node, data) {},
    dataFormSubmit () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.submit()
        }
      })
    },
    async submit () {
      let res =
        this.title === '编辑岗位名称'
          ? await operationschoolpositionupdate({
            node_id: this.jobId,
            update: {
              node_name: this.form.name
            }
          })
          : await operationschoolpositionadd({
            parent: this.jobId,
            node_id: this.jobId == 0 ? 0 : '',
            node_type: 0,
            node_name: this.form.name
          })
      if (res[0]) {
      }
      let data = res[1]
      if (data && data.code === 0) {
        this.visible = false
        this.$message.success(
          `${(this.title = '编辑岗位名称')}` ? '编辑成功!' : '新增成功！'
        )
        this.getDataList()
      } else {
        this.$message.error(data.msg)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  .department-role-manage {
    width: 60%;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
